<template>
    <ul>
        <li :class="{active:item.isCompleted}" v-for="(item,i) in data" :key="item.id">
            <input type="checkbox" 
            :checked="item.isCompleted"
            @change="checkChange(item,$event)">
            <b>{{item.todo}}</b>
            <button @click="handleDel(i)">删除</button>
        </li>
    </ul>
    <fieldset>
        <legend>详情</legend>
        <button @click="filter('all')">全部:{{allCount}}</button>
        <button @click="filter('completed')">已完成:{{completedCount}}</button>
        <button @click="filter('active')">未完成:{{activeCount}}</button>
    </fieldset>
</template>()
<script setup>
    import { defineProps ,toRefs,defineEmits} from 'vue';
    // 定义props接收data
    let props = defineProps(['data','allCount','completedCount','activeCount'])
    let {data,allCount,completedCount,activeCount} = toRefs(props)

    // 点击删除按钮的逻辑
    let emits = defineEmits(['del',['getFlag']])

    let handleDel = (i)=>{
        emits('del',i)
    }

    // 勾选

    let checkChange = (item,e) =>{
        // 拿到input元素的勾选状态
        console.log(e.target.checked);
        item.isCompleted = e.target.checked
    }   

    // 声明一个筛选todo的方法
    let filter = flag =>{
        emits('getFlag',flag)
    }
</script>
<style scoped>
    .active{
        background-color: skyblue;
    }
</style>